<template>
  <div class="app-container">
    <div class="btnCss">
      <el-tabs v-model="active" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="first">
          <IPTodo v-if="active == 'first'"></IPTodo>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="second">
          <IPFinished v-if="active == 'second'"></IPFinished>
        </el-tab-pane>
        <el-tab-pane  v-if="checkPermi(['workflow:IpAddress:manage'])"   label="IP地址申请管理" name="third">
          <IPGather v-if="active == 'third'"></IPGather>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import IPTodo from './components/IPtodo.vue';
import IPFinished from './components/IPfinished.vue';
import IPGather from './components/IPgather.vue';

export default {
    name:'IpAddress',
    components: {
      IPTodo,
      IPFinished,
      IPGather
    },
  data() {
    return {
       active:'first'
    };
    },
    mounted() {
        // 获取按钮元素数组中第一个.click()
  },
  methods: {
    
    handleClick(tab, event) {
      this.active = tab.name
    }
  }
};
</script>
